<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>rangeslider.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../dist/rangeslider.css">
    <style>
        *,
        *:before,
        *:after {
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
        }

        html {
            color: #404040;
            font-family: Helvetica, arial, sans-serif;
        }
        body {
            padding: 50px 20px;
            margin: 0 auto;
            max-width: 800px;
        }

        output {
            display: block;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            margin: 30px 0;
            width: 100%;
        }

        .u-left {
            float: left;
        }

        .u-cf:before,
        .u-cf:after {
            content: "";
            display: table;
        }
        .u-cf:after {
            clear: both;
        }

        .u-text-left {
            text-align: left;
        }
    </style>
    <!--[if lt IE 9]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
    <div>
        <h2>Comparison to native element</h2>
        <input type="range" min="0" max="5" data-rangeslider>
        <br>
        <br>
        <input type="range" min="0" max="5" style="width:100%;">
        <output></output>
    </div>

    <br>
    <br>

    <div>
        <h2>Negative attributes</h2>
        <div>
            <input type="range" min="-10" max="0" data-rangeslider>
            <output></output>
        </div>
        <div>
            <input type="range" min="-20" max="20" value="-10" data-rangeslider>
            <output></output>
        </div>
    </div>

    <br>
    <br>

    <div>
        <h2>Floating point boundaries</h2>
        <div>
            <input type="range" min="10" max="11" step="0.1" value="10.2" data-rangeslider>
            <output></output>
        </div>
        <div>
            <input type="range" min="0.1" max="3" step="0.1" value="0.5" data-rangeslider>
            <output></output>
        </div>
        <div>
            <input type="range" min="0.111" max="3.33" step="0.111" value="1.776" data-rangeslider>
            <output></output>
        </div>
    </div>

    <br>
    <br>

    <div class="u-cf">
        <h2><code>data-orientation="vertical"</code></h2>
        <div class="u-left" style="height: 200px">
            <input type="range" min="0" max="5" data-rangeslider data-orientation="vertical">
        </div>
        <div class="u-left" style="height: 200px">
            <input type="range" min="0" max="5" style="-webkit-appearance: slider-vertical; min-height: 150px; max-height: 100%;">
        </div>
        <output class="u-text-left"></output>
    </div>

    <br>
    <br>

    <div>
        <h2><code>value="0"</code></h2>
        <input type="range" value="0" data-rangeslider>
        <output></output>
    </div>

    <br>
    <br>

    <div id="js-example-disabled">
        <h2><code>disabled</code></h2>
        <input type="range" min="10" max="100" data-rangeslider disabled>
        <output></output>
        <button data-behaviour="toggle">Toggle disabled state</button>
    </div>

    <br>
    <br>

    <div>
        <h2><code>max="0"</code> disables slider</h2>
        <input type="range" max="0" data-rangeslider>
        <output></output>
    </div>

    <br>
    <br>

    <div id="js-example-change-value">
        <h2>Programmatic value changes</h2>
        <input type="range" min="10" max="100" data-rangeslider>
        <output></output>
        <input type="number" value="10"><button>Change value</button>
    </div>

    <br>
    <br>

    <div id="js-example-change-attributes">
        <h2>Programmatic attribute changes</h2>
        <input type="range" min="10" max="100" step="5" data-rangeslider>
        <output></output>
        <label><input type="number" name="min" value="10"> <code>min</code></label><br>
        <label><input type="number" name="max" value="100"> <code>max</code></label><br>
        <label><input type="number" name="step" value="5"> <code>step</code></label>
        <br><br>
        <button>Change</button>
    </div>

    <br>
    <br>
    <br>
    <br>

    <div id="js-example-destroy">
        <h2>Destroy a plugin instance</h2>
        <input type="range" min="10" max="1000" step="10" value="500" data-rangeslider>
        <output></output>
        <button data-behaviour="destroy">Destroy</button>
        <button data-behaviour="initialize">Initialize</button>
    </div>

    <br>
    <br>

    <div id="js-example-hidden">
        <h2>Consider initialization and update of hidden elements</h2>
        <div style="display:none">
            <input type="range" min="10" max="100" data-rangeslider>
            <output></output>
        </div>
        <button data-behaviour="toggle">Toggle visibility</button>
    </div>

    <br>
    <br>

    <div id="js-example-hidden">
        <h2>Combination with native <code>&lt;details&gt;</code> element</h2>
        <details>
            <summary>Toggle</summary>
            <br>
            <br>
            <input type="range" min="10" max="100" value="20" data-rangeslider>
            <output></output>
        </details>
    </div>

    <script src="//localhost:8081"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="../dist/rangeslider.js"></script>
    <script>
    $(function() {

        var $document = $(document);
        var selector = '[data-rangeslider]';
        var $element = $(selector);

        // For ie8 support
        var textContent = ('textContent' in document) ? 'textContent' : 'innerText';

        // Example functionality to demonstrate a value feedback
        function valueOutput(element) {
            var value = element.value;
            var output = element.parentNode.getElementsByTagName('output')[0] || element.parentNode.parentNode.getElementsByTagName('output')[0];
            output[textContent] = value;
        }

        $document.on('input', 'input[type="range"], ' + selector, function(e) {
            valueOutput(e.target);
        });

        // Example functionality to demonstrate disabled functionality
        $document .on('click', '#js-example-disabled button[data-behaviour="toggle"]', function(e) {
            var $inputRange = $(selector, e.target.parentNode);

            if ($inputRange[0].disabled) {
                $inputRange.prop("disabled", false);
            }
            else {
                $inputRange.prop("disabled", true);
            }
            $inputRange.rangeslider('update');
        });

        // Example functionality to demonstrate programmatic value changes
        $document.on('click', '#js-example-change-value button', function(e) {
            var $inputRange = $(selector, e.target.parentNode);
            var value = $('input[type="number"]', e.target.parentNode)[0].value;

            $inputRange.val(value).change();
        });

        // Example functionality to demonstrate programmatic attribute changes
        $document.on('click', '#js-example-change-attributes button', function(e) {
            var $inputRange = $(selector, e.target.parentNode);
            var attributes = {
                    min: $('input[name="min"]', e.target.parentNode)[0].value,
                    max: $('input[name="max"]', e.target.parentNode)[0].value,
                    step: $('input[name="step"]', e.target.parentNode)[0].value
                };

            $inputRange.attr(attributes);
            $inputRange.rangeslider('update', true);
        });

        // Example functionality to demonstrate destroy functionality
        $document
            .on('click', '#js-example-destroy button[data-behaviour="destroy"]', function(e) {
                $(selector, e.target.parentNode).rangeslider('destroy');
            })
            .on('click', '#js-example-destroy button[data-behaviour="initialize"]', function(e) {
                $(selector, e.target.parentNode).rangeslider({ polyfill: false });
            });

        // Example functionality to test initialisation on hidden elements
        $document
            .on('click', '#js-example-hidden button[data-behaviour="toggle"]', function(e) {
                var $container = $(e.target.previousElementSibling);
                $container.toggle();
            });

        // Basic rangeslider initialization
        $element.rangeslider({

            // Deactivate the feature detection
            polyfill: false,

            // Callback function
            onInit: function() {
                valueOutput(this.$element[0]);
            },

            // Callback function
            onSlide: function(position, value) {
                console.log('onSlide');
                console.log('position: ' + position, 'value: ' + value);
            },

            // Callback function
            onSlideEnd: function(position, value) {
                console.log('onSlideEnd');
                console.log('position: ' + position, 'value: ' + value);
            }
        });

    });
    </script>
</body>
</html>
